<template>
  <div>
    <comment-header>问答</comment-header>
    <div v-for="(item,index) in contentList" :key="index">
      <div class="smallbox">
        <h3 v-text="item.title"></h3>
        <div class="smallbottom" v-text="item.content"></div>
      </div>
    </div>
  </div>
</template>
<script>
import commentHeader from "../../components/comment/commentHeader";

export default {
  components: {
    commentHeader
  },
  data() {
    return {
      page: 1,
      contentList: [],
      loadingMore: false
    };
  },
  mounted() {
    this.AskContent();
    window.onscroll = this.didscroll;
  },
  methods: {
    AskContent: function() {
      var that = this;
      this.$http
        .get("/pet/v2/questionlist?page=" + this.page + "&tag_id=0")
        .then(function(data) {
          console.log(data);
          that.contentList = data.body.data.list;
        });
    },
    didscroll() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      var contentHeight = document.body.clientHeight;
      var windowHeight = window.innerHeight;
      if (scrollTop + windowHeight > contentHeight - 60) {
        if (this.loadingMore == false) {
          this.loadMore();
        }
      }
    },
    loadMore() {
      this.loadingMore = true;
      this.page += 1;
      var that = this;
      var url = "/pet/v2/questionlist?page=" + this.page + "&tag_id=0";
      this.$http.get(url).then(function(data) {
        that.contentList = that.contentList.concat(data.body.data.list);
        that.loadingMore = false;
      });
    }
  }
};
</script>
<style scoped>
.smallbox {
  width: 85vw;
  margin: 0 auto;
  background: white;
  padding: 5vw;
  text-align: left;
}
.smallbottom {
  font-size: 3.8vw;
  line-height: 6vw;
  height: 12vw;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
h3 {
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 1vw;
}
</style>
